{% extends 'base.html' %}
{% block content %}
<div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">运维平台快捷入口</div>
                        <div class="layui-card-body ">
                            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h4>Git代码仓库</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-windows" style="color: #1E9FFF;font-size: 25px"></i>  </p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h4>jenkins发布平台</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-set" style="color: #1E9FFF;font-size: 25px"></i> </p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h4>镜像仓库</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-template-1" style="color: #1E9FFF;font-size: 25px"></i></p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="https://www.baidu.com" class="x-admin-backlog-body">
                                        <h4>日志平台</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-chart-screen" style="color: #1E9FFF;font-size: 25px"></i> </p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6">
                                    <a href="http://devops.blongcloud.cn/" class="x-admin-backlog-body">
                                        <h4>监控中心</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-website" style="color: #1E9FFF;font-size: 25px"></i> </p>
                                    </a>
                                </li>
                                <li class="layui-col-md2 layui-col-xs6 ">
                                    <a href="javascript:;" class="x-admin-backlog-body">
                                        <h4>堡垒机</h4>
                                        <p>
                                            <i class="layui-icon layui-icon-video" style="color: #1E9FFF;font-size: 25px"></i> </p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">资产汇总

                        </div>
                        <div class="layui-card-body  ">
                            <div id="main" style="width: 100%;height: 245px;">
                                                               <center>

                                </center>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">资源分布

                        </div>
                        <div class="layui-card-body ">

                            <div id="main1" style="width: 100%;height: 245px;">
                                <center>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">最新消息

                        </div>
                        <div class="layui-card-body ">

                            <div class="news_style">

                                <div class="myscroll" id="FontScroll">
                                    <ul class="list">
                                        <li><i class="iconfont">&#xe622;</i><a href="#" onClick="fun1()">1.192.168.1.112 cpu告警</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#" onclick="fun1()">2.192.168.1.45 mem告警”...</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#">3.k8s服务变更</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#">4.192.168.1.112 磁盘不足80%</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#">5.MySQL备份完成</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#">6.Pod重启完成</a></li>
                                        <li><i class="iconfont">&#xe622;</i><a href="#">7.Pod扩容为3副本</a></li>

                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">实验室环境监测</div>
                        <div class="layui-card-body ">
                        <div id="main2" style="width: 100%;height: 245px;">
                        </div>
                    </div>
                </div>

            </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">技术资源</div>
                        <div class="layui-card-body ">
                            <label><a href="#" style="color: #009688">内部wiki</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: #00FF00">产品版本信息</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: #04564e">运维问题库</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: #eb7350">部门目录</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: indigo">云原生技术</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: #00FF00">学习材料</a> </label>| &nbsp;&nbsp;
                            <label><a href="#" style="color: #F7B824">环境清单</a> </label>|

                        </div>
                    </div>
                </div>



</div>
</div>

{% endblock %}

{% block js %}
<script src="../static/layui/layui.js"></script>

    <script type="text/javascript">
        {#var mylist = '{{ mylist|tojson}}';#}
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '实验分布'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["linux","架构","数据库","容器","cicd"]
                {#data: [{% for i in myops %}'{{ i }}',{% endfor %}]#}
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [5, 2, 6, 8, 10]

            }]
        };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>



	<script type="text/javascript" charset="UTF-8">
		var kv = new Array();
		kv = {{ data | safe }}
		var test = new Array();
		for(var logkey in kv){
			test.push( {value:kv[logkey], name:logkey} )
		}
		var display = function(){
			var main = echarts.init(document.getElementById("main1"));
			var option = {
				legend: {
					orient: 'vertical',
					left: 'right',
				},
                tooltip: {
                        show: true //显示提示框
                },
				series: [
					{
						type: 'pie',
						radius: '70%',
						center: ['50%', '50%'],
						detail: {formatter:'{value}'},
						data: test
					}
				]
			};
			main.setOption(option,true);
		};
		display();
	</script>

	<script type="text/javascript" charset="UTF-8">
			var kv = new Array();
			var keys = new Array();
			var values = new Array();
			kv = {{ data1 | safe }}

			for(var logkey in kv){
				keys.push(logkey);
				values.push(kv[logkey]);
			}
			var display = function() {
				var main1 = echarts.init(document.getElementById("main"));
				var option = {
					xAxis: {
						type: 'category',
						data: keys
					},
					yAxis: {
						type: 'value'
					},
                    tooltip: {
                        show: true //显示提示框
                    },
					series: [{
						data: values,
						type: 'bar'
					}]
				};
				main1.setOption(option,true);
			};
		display();
	</script>

		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main2'));
            var option = {color: [ '#F78723','#6134B5', '#18BD03', '#27A5F9'],tooltip: {trigger: 'axis',backgroundColor:'#FFFFFF',textStyle: {color: '#44518D'},axisPointer: {type: 'cross'}},grid: {right: '14%',left:'14%'},legend: {data:['气压（hPa）','温度（℃）','降水（mm）','相对湿度（%）'],textStyle:{color:'#8190D6'}},xAxis: [{type: 'category',axisTick: {alignWithLabel: true},axisLine:{lineStyle:{color:'#8190D6'}},data: ['2000','2001','2002','2003','2004','2005','2006']}],yAxis: [{type: 'value',name: '气压（hPa）',nameLocation:'middle',nameGap:40,min: 0,max: 890,offset: 60,position: 'left',axisLine: {show:false,lineStyle: {color: '#F78723'}}},{type: 'value',name: '温度（℃）',nameLocation:'middle',nameGap:30,min: 0,max: 60,position: 'left',axisLine: {show:false,lineStyle: {color:'#6134B5' }}},{type: 'value',name: '降水（mm）',nameLocation:'middle',nameGap:30,min: 0,max: 100,position: 'right',axisLine: {show:false,lineStyle: {color:  '#18BD03'}}},{type: 'value',name: '相对湿度（%）',nameLocation:'middle',nameGap:30,min: 0,max: 100,position: 'right',offset: 65,axisLine: {show:false,lineStyle: {color: '#27A5F9'}}},],series: [{name:'气压（hPa）',type:'line',yAxisIndex: 2,smooth: true,data:[13,2,3,14,5,6,7]},{name:'温度（℃）',type:'line',yAxisIndex: 1,smooth: true,data:[33,24,35,34,32,28,36]},{name:'降水（mm）',type:'line',yAxisIndex: 0,smooth: true,data:[10,8,5,15,9,20,12]},{name:'相对湿度（%）',type:'line',yAxisIndex: 3,smooth: true,data:[50,48,70,45,33,69,70]},]
};
            myChart.setOption(option);
     </script>
{% endblock %}